<!DOCTYPE html>
<html>

<head>
    <title>用户中心</title>
    <meta name="keywords" content="123456" />
    <meta name="description" content="用户中心">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="author" content="大麦云信息">
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="./assets/css/bootstrap.min.css" />
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
    <style>
        #contain {
            margin-bottom: 60px;
        }

        .navbar-fixed-bottom {
            box-shadow: 0px -5px 5px rgba(0, 0, 0, .2);
            height: 60px;
        }

        #contain-head {
            /* height: 12rem; */
            /* background-color: linear-gradient(#F08080, #FFB6C1);; */
            background: linear-gradient(#fb6969, #fe989f);
            /* 标准的语法 */
        }



        .my-row {
            padding: 5rem 0 0 0;
            display: flex;
        }

        .my-cell.u-1of4 {
            flex: 0 0 25%;
        }

        .my-cell.u-1of2 {
            flex: 0 0 50%;
        }

        #contain-body {
            background-color: #f7f7f7;
            padding: 14px 8px;
        }

        #body-items {}

        .body-item {
            background-color: white;
            margin: 0 0 10px 0;
            border-radius: 10px;
        }

        .icon-text-1 {
            margin: 5px 0 0 0;
            font-size: 12px;
        }

        #head-icons {
            display: flex;
        }

        #nine-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .nine-grid-cell {
            padding: 1rem 0 0 0;
            border: 1px solid #F0F0F0;
        }

        .nine-grid-cell.u1 {
            padding: 1rem 0 0 0;
            border-style: dotted;
            border-color: #F0F0F0;
            border-width: 0 1px 1px 0;
        }

        .nine-grid-cell.u2 {
            padding: 1rem 0 0 0;
            border-style: dotted;
            border-color: #F0F0F0;
            border-width: 0 0 1px 0;
        }

        .nine-grid-cell.u3 {
            padding: 1rem 0 0 0;
            border-style: dotted;
            border-color: #F0F0F0;
            border-width: 0 1px 0 0;
        }

        .nine-grid-cell.u4 {
            padding: 1rem 0 0 0;
            border-style: dotted;
            border-color: #F0F0F0;
            border-width: 0 0 0 0;
        }

        .nine-grid-cell.u-empty {
            background-color: #f7f7f7;
        }

        .my-cell.u-1of3 {
            flex: 0 0 33%;
        }

        .my-cell.u-1of5 {
            flex: 0 0 20%;
        }

        .my-cell.u-2of5 {
            flex: 0 0 40%;
        }

        .my-cell.u-3of5 {
            flex: 0 0 60%;
        }

        .my-cell.u-3of10 {
            flex: 0 0 30%;
        }

        .my-cell.u-4of10 {
            flex: 0 0 40%;
        }

        .my-cell.u-35of100 {
            flex: 0 0 35%;
        }


        .my-cell.u-45of100 {
            flex: 0 0 45%;
        }

        #my-footer {
            display: flex;
        }

        .my-icon {
            padding: 1rem;
            text-align: center;
        }

        .my-icon-2 {
            /* width: 35%; */
            width: 32px;
            height: 32px;
        }

        .my-icon-3 {
            margin: 10px 0 4px 0;
            width: 20px;
        }

        .my-icon-4 {
            /* width: 65%; */
            width: 32px;
            height: 32px;
        }

        .icon-text-3 {
            font-size: 12px;
            padding: 2px;
        }

        #announce {
            padding: 10px 10px;
        }

        .announce-text {
            font-size: 12px;
        }

        .icon-text-2 {
            font-size: 12px;
            padding: 8px;
        }

        avatar {}
    </style>
</head>

<body>

    <div id="contain">
        <div id="contain-head">
            <div class="my-row">
                <div id="avatar" class="my-cell u-1of5" style="text-align:right;">
                    <img src="./assets/others/user_center2/avatar.png" class="img-circle" style="width: 45px;height: 45px;border:2px solid white;">
                    <!-- <img src="./assets/others/yes.jpg" class="avatar" style="width: 75%;"> -->
                </div>
                <div id="person-info" class="my-cell u-35of100" style="font-size: 12px;">
                    <div style="margin: 0 1rem;">
                        <h4 id="" style="color:white;margin: 0;">君_vip</h3>
                    </div>

                    <div style="color:#faff83;margin: 1rem 1rem;">
                        <!-- <i class="fa fa-fire" aria-hidden="true"></i> -->
                        <img src="./assets/others/user_center2/touxian.png" style="width: 14px;height: 18px;vertical-align: text-bottom;" /> 最佳代理人
                    </div>
                    <p style="color:white;margin: 1rem 1rem;">关注0 | 粉丝0</p>
                </div>
                <div id="money" class="my-cell u-45of100" style="color:white;">
                    <div style="margin: 14px 0 20px 0;">
                        <div style="background:linear-gradient(to right,#fc5c5d, #fd8488);padding: 16px 0px 2px 28px;">
                            <div style="margin: 0;">总余额: </div>
                            <div style="margin: 2px 0 0 0;font-size:22px;">10000.0</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div id="contain-body">
            <div id="body-items">

                <div class="body-item">
                    <div id="head-icons">
                        <div class="my-cell u-1of4">
                            <div class="my-icon">
                                <img src="./assets/others/user_center2/shouyi.png" class="my-icon-4">
                                <div class="icon-text-1">收益</div>
                            </div>
                        </div>
                        <div class="my-cell u-1of4">
                            <div class="my-icon">
                                <img src="./assets/others/user_center2/dingdan.png" class="my-icon-4">
                                <div class="icon-text-1">订单</div>
                            </div>
                        </div>
                        <div class="my-cell u-1of4">
                            <div class="my-icon">
                                <img src="./assets/others/user_center2/tuandui.png" class="my-icon-4">
                                <div class="icon-text-1">团队</div>
                            </div>
                        </div>
                        <div class="my-cell u-1of4">
                            <div class="my-icon">
                                <img src="./assets/others/user_center2/weiquan.png" class="my-icon-4">
                                <div class="icon-text-1">微圈</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="body-item" id="announce">
                    <div style="background-color:#ffebdb;border-radius:10px;">
                        <div style="padding: 5px 10px;">


                            <!-- <div class="announce-text" style="display:inline-block;">不会使用？点击查看教程</div> -->


                            <div id="announce-msg" class="announce-text" style="display:inline-block;">
                                <div style="display:inline-block;">
                                    <i class="fa fa-bullhorn" aria-hidden="true"></i> 公告: </div>
                                不会使用？点击查看教程
                            </div>
                        </div>
                    </div>
                </div>

                <div class="body-item">
                    <div id="nine-grid">
                        <div class="my-cell u-1of3 nine-grid-cell u1">
                            <div style="text-align:center;">
                                <img src="./assets/others/user_center2/qianbao.png" class="my-icon-2">
                                <div class="icon-text-2">钱包</div>
                            </div>
                        </div>
                        <div class="my-cell u-1of3 nine-grid-cell u1">
                            <div style="text-align:center;">
                                <img src="./assets/others/user_center2/tixian.png" class="my-icon-2">
                                <div class="icon-text-2">提现</div>
                            </div>
                        </div>
                        <div class="my-cell u-1of3 nine-grid-cell u2">
                            <div style="text-align:center;">
                                <img src="./assets/others/user_center2/palou.png" style="" class="my-icon-2">
                                <div class="icon-text-2">爬楼</div>
                            </div>
                        </div>
                        <div class="my-cell u-1of3 nine-grid-cell u1">
                            <div style="text-align:center;">
                                <img src="./assets/others/user_center2/jiafen.png" class="my-icon-2">
                                <div class="icon-text-2">加粉</div>
                            </div>
                        </div>
                        <div class="my-cell u-1of3 nine-grid-cell u1">
                            <div style="text-align:center;">
                                <img src="./assets/others/user_center/jiaqun.png" class="my-icon-2">
                                <div class="icon-text-2">加群</div>
                            </div>
                        </div>
                        <div class="my-cell u-1of3 nine-grid-cell u2">
                            <div style="text-align:center;">
                                <img src="./assets/others/user_center/jiaren.png" class="my-icon-2">
                                <div class="icon-text-2">加人</div>
                            </div>
                        </div>
                        <div class="my-cell u-1of3 nine-grid-cell u1">
                            <div style="text-align:center;">
                                <img src="./assets/others/user_center2/tuiguang.png" class="my-icon-2">
                                <div class="icon-text-2">推广赚钱</div>
                            </div>
                        </div>
                        <div class="my-cell u-1of3 nine-grid-cell u1">
                            <div style="text-align:center;">
                                <img src="./assets/others/user_center2/haibao.png" class="my-icon-2">
                                <div class="icon-text-2">海报推广</div>
                            </div>
                        </div>
                        <div class="my-cell u-1of3 nine-grid-cell u2">
                            <div style="text-align:center;">
                                <img src="./assets/others/user_center2/fenxiao.png" class="my-icon-2">
                                <div class="icon-text-2">分享赚钱</div>
                            </div>
                        </div>

                        <div class="my-cell u-1of3 nine-grid-cell u1">
                            <div style="text-align:center;">
                                <img src="./assets/others/user_center2/miaoshaqun.png" class="my-icon-2">
                                <div class="icon-text-2">秒杀群</div>
                            </div>
                        </div>
                        <div class="my-cell u-1of3 nine-grid-cell u1">
                            <div style="text-align:center;">
                                <img src="./assets/others/user_center2/jiaocheng.png" class="my-icon-2">
                                <div class="icon-text-2">教程</div>
                            </div>
                        </div>
                        <div class="my-cell u-1of3 nine-grid-cell u2">
                            <div style="text-align:center;">
                                <img src="./assets/others/user_center2/kefu.png" class="my-icon-2">
                                <div class="icon-text-2">客服</div>
                            </div>
                        </div>


                        <div class="my-cell u-1of3 nine-grid-cell u3">
                            <div style="text-align:center;">
                                <img src="./assets/others/user_center2/shezhi.png" class="my-icon-2">
                                <div class="icon-text-2">设置</div>
                            </div>
                        </div>
                        <div class="my-cell u-1of3 nine-grid-cell u3">
                            <div style="text-align:center;">
                                <img src="./assets/others/user_center/caiqie.png" class="my-icon-2">
                                <div class="icon-text-2">帮助与反馈</div>
                            </div>
                        </div>

                        <div class="my-cell u-1of3 nine-grid-cell u4 u-empty">
                            <div style="text-align:center;">

                            </div>
                        </div>
                    </div>
                </div>

            </div>



            <!-- <div id="pin-footer">固定底端</div> -->

        </div>

        <nav class="navbar navbar-default navbar-fixed-bottom">
            <div id="my-footer">
                <div class="my-cell u-1of5">
                    <a href="./test.html">
                        <div style="text-align:center;">
                            <img src="./assets/others/home/shouye.png" class="my-icon-3">
                            <div class="icon-text-3">首页</div>
                        </div>
                    </a>
                </div>
                <div class="my-cell u-1of5">
                    <div style="text-align:center;">
                        <img src="./assets/others/user_center2/fenxiaozhongxin.png" class="my-icon-3">
                        <div class="icon-text-3">分销中心</div>
                    </div>

                </div>
                <div class="my-cell u-1of5">
                    <div style="text-align:center;">
                        <div style="box-shadow: 0px -5px 6px #888888;width:60px;height:60px; border-radius: 50%;background-color: #f7f7f7;position:relative;left:0;right:0;bottom: 30px;margin: 0 auto;">
                            <img src="./assets/others/user_center2/shiyongjiaocheng.png" style="margin: 10px 0 4px 0;width: 35px;">
                            <div class="icon-text-3">使用教程</div>
                        </div>
                    </div>
                </div>
                <div class="my-cell u-1of5">
                    <div style="text-align:center;">
                        <img src="./assets/others/user_center2/kefu2.png" class="my-icon-3">
                        <div class="icon-text-3">客服</div>
                    </div>
                </div>
                <div class="my-cell u-1of5">
                    <div style="text-align:center;">
                        <img src="./assets/others/user_center2/wode.png" class="my-icon-3">
                        <div class="icon-text-3">我的</div>
                    </div>
                </div>

            </div>
        </nav>

    </div>

    <!-- <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/js/bootstrap.min.js"></script>
    <script src="./assets/js/roll_notice.js"></script>
    <script>
        $(document).ready(() => {
            roll_notice({ id: 'announce-msg', interval: 20 })
        })
    </script>
</body>

</html>